export default {
  data() {
    return {
      // 角色列表数据
      rolesList: [],
      // 添加角色对话框显示与隐藏
      addDialogVisible: false,
      // 添加角色表单数据
      addForm: {
        roleName: '',
        roleDesc: ''
      },
      // 添加角色对话框验证规则
      addFormRules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleDesc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
      },
      // 编辑角色对话框的显示与隐藏
      editDialogVisible: false,
      // 编辑角色表单数据
      editForm: {
        id: '',
        roleName: '',
        roleDesc: ''
      },
      // 编辑角色的表单验证规则
      editFormRules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        roleDesc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
      },
      // 分配角色对话框的显示与隐藏
      setRightDialogVisible: false,
      // 权限的树形结构数据
      rightTree: [],
      // 节点的配置项
      treeProps: {
        label: 'authName',
        children: 'children'
      },
      // 默认被选中的叶子节点的数组
      defaultCheckedLeftKeys: [],
      // 要分配权限的角色id
      selectedRoleId: ''
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 获取角色列表数据
    async getRolesList() {
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) return this.$message.error('获取角色列表失败!')
      this.rolesList = res.data
    },
    // 添加新角色
    addRole() {
      this.$refs.addFormRef.validate(async valid => {
        // 验证失败
        if (!valid) return
        // 验证成功
        const { data: res } = await this.$http.post('roles', this.addForm)
        if (res.meta.status !== 201) return this.$message.error('添加角色失败!')
        this.$message.success('添加角色成功!')
        this.getRolesList()
        // 关闭对话框
        this.addDialogVisible = false
      })
    },
    // 监听 添加角色对话框关闭事件
    addDialogClosed() {
      // 重置表单
      this.$refs.addFormRef.resetFields()
    },
    // 监听 编辑角色对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 显示编辑对话框
    async showEditDialog(scope) {
      // console.log(scope)
      this.editForm.id = scope.row.id
      this.editForm.roleName = scope.row.roleName
      this.editForm.roleDesc = scope.row.roleDesc
      this.editDialogVisible = true
    },
    // 提交编辑好的角色
    editRole() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('roles/' + this.editForm.id, this.editForm)
        if (res.meta.status !== 200) return this.$message.error('编辑角色信息失败!')
        this.$message.success('编辑角色信息成功!')
        this.getRolesList()
        this.editDialogVisible = false
      })
    },
    // 删除角色
    async del(scope) {
      const confirmResult = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 用户取消了删除
      if (confirmResult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
      // 用户确认删除
      const { data: res } = await this.$http.delete('roles/' + scope.row.id)
      if (res.meta.status !== 200) return this.$message.error('删除角色失败!')
      this.$message.success('删除角色成功!')
      this.getRolesList()
    },
    // 删除对应的权限
    async removeRights(row, rightId) {
      // console.log(11111)
      const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 取消删除
      if (confirmResult !== 'confirm') {
        return this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
      // 点击确认删除
      const { data: res } = await this.$http.delete(`roles/${row.id}/rights/${rightId}`)
      if (res.meta.status !== 200) return this.$message.error('删除权限失败!')
      this.$message.success('删除权限成功!')
      // 把当前行数据的children属性,替换为服务器返回的新数据
      row.children = res.data
    },
    // 显示分配权限对话框
    async showSetRightDialog(row) {
      // console.log(row)
      // 保存角色id
      this.selectedRoleId = row.id
      // 获取权限列表的树形数据
      const { data: res } = await this.$http.get('rights/tree')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取权限数据失败!')
      // 将权限数据赋值给rightTree供页面使用
      this.rightTree = res.data
      const keys = []
      // 获取所有三级权限的id
      this.getLeafIds(row, keys)
      // 将当前角色的三级权限默认渲染到树形结构中
      this.defaultCheckedLeftKeys = keys
      this.setRightDialogVisible = true
    },
    // 循环递归,获取当前角色下的所有三级权限的id
    getLeafIds(node, keyArr) {
      if (!node.children) {
        keyArr.push(node.id)
      } else {
        node.children.forEach(item => {
          this.getLeafIds(item, keyArr)
        })
      }
    },
    // 分配权限
    async updateRights() {
      // 1. 获取到 所有选中的三级权限的id值
      const k1 = this.$refs.tree.getCheckedKeys()
      // 2. 所有半选状态的id值
      const k2 = this.$refs.tree.getHalfCheckedKeys()
      // 3. 合并半选和全选状态的id值
      const keys = [...k1, ...k2]
      // 4. 利用展开运算符,合并数组
      const idStr = keys.join(',')
      // 5. 请求API接口保存最新的权限
      const { data: res } = await this.$http.post(`roles/${this.selectedRoleId}/rights`, { rids: idStr })
      if (res.meta.status !== 200) return this.$message.error('更新权限失败!')
      this.$message.success('更新权限成功!')
      this.getRolesList()
      this.setRightDialogVisible = false
    }
  }
}
